<template>
  <div class="detailPage pd-20 mg-10">
    <div class="backBtn">
      <Back width="18px" hight="18px" />
      <ElButton class="btn" @click="handleBack()">返回</ElButton>
    </div>
    <ElTabs v-model="activeName" class="detail-text">
      <ElTabPane label="任务详情" name="first">
        <p class="title">任务信息</p>
        <ElRow>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>计划名称：</span>
              <span class="text">{{ record.planName }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>执行模式：</span>
              <span class="text">{{ record.executeType }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>重复规则：</span>
              <span class="text">{{ record.taskRule }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>任务状态：</span>
              <span class="text">{{ record.status }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>归属组织：</span>
              <span class="text">{{ record.organizationName }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>航线名称：</span>
              <span class="text">{{ record.airlineName }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>执行飞手/机场：</span>
              <span class="text">{{ record.airportName }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>计划开始时间：</span>
              <span class="text">{{ record.startTime }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>执行开始时间：</span>
              <span class="text">{{ record.startTime }}</span>
            </div>
          </ElCol>
          <ElCol :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <div>
              <span>执行结束时间：</span>
              <span class="text">{{ record.endTime }}</span>
            </div>
          </ElCol>
        </ElRow>
        <p class="title">任务执行情况</p>
        <ElRow>
          <ElCol :xs="24">
            <div
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
              "
            >
              <span>任务进度：</span>
              <div class="timelineProcessBox">
                <!-- <el-timeline class="timeline">
                  <el-timeline-item
                    class="lineitem"
                    :class="activity.done ? 'active' : 'inactive'"
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.time"
                  >
                    <span style="display: flex; flex-direction: column">
                      <span style="margin: 10px 0; font-size: 16px">
                        {{ activity.content }}
                      </span>
                    </span>
                  </el-timeline-item>
                </el-timeline> -->

                <ElSteps align-center>
                  <ElStep
                    :icon="CircleCheck"
                    v-for="(activity, index) in activities"
                    :key="index"
                  >
                    <template #title>
                      <span>
                        {{ activity.executeTime }}
                      </span>
                      <p>
                        {{ activity.processName }}
                      </p>
                    </template>
                  </ElStep>
                </ElSteps>
              </div>
            </div>
          </ElCol>
          <ElCol :xs="24">
            <div
              style="
                position: relative;
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
              "
            >
              <span>航线地图：</span>
              <div style="position: relative" class="map-container">
                <mapPosition
                  style="width: 540px; height: 300px"
                  :defaultAddress="defaultAddress"
                  :defaultPoint="defaultPoint"
                  :wayPoints="wayPoints"
                  @getPosition="getPosition"
                />
                <div class="maphover" @click="mapClick">
                  <div>
                    <!-- <img src="../../../../assets/u4660.png" alt="" /> -->
                    <p>放大</p>
                  </div>
                </div>
              </div>
            </div>
          </ElCol>
          <!-- <ElCol :xs="24">
            <div
              style="
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
              "
            >
              <span>巡检报告：</span>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  justify-content: flex-start;
                "
              >
                <span style="margin: 0" class="text">
                  巡检时长30分钟，距离2.6公里，航点7个，发现异常情况1处，异常种类为“<span
                    style="color: #f56c6c"
                    >人员聚集</span
                  >”。异常情况已经手动上报。
                </span>
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    font-size: 12px;
                    color: #606266;
                  "
                >
                  <div class="img-text">
                    <img src="../../../../assets/u4660.png" alt="" />
                    <div style="margin: 10px">
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>2025-03-22 15:30:23</span>
                        <span>人员聚集</span>
                      </div>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>地址</span>
                        <span>路北区建国路新华广场1号出入口</span>
                      </div>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>坐标</span>
                        <span>118.302553，40.455888</span>
                      </div>
                    </div>
                  </div>
                  <div class="img-text">
                    <img src="../../../../assets/u4660.png" alt="" />
                    <div style="margin: 10px">
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>2025-03-22 15:30:23</span>
                        <span>人员聚集</span>
                      </div>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>地址</span>
                        <span>路北区建国路新华广场1号出入口</span>
                      </div>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          line-height: 14px;
                        "
                      >
                        <span>坐标</span>
                        <span>118.302553，40.455888</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </ElCol> -->
        </ElRow>
        <ElRow>
          <ElCol :xs="24">
            <div>
              <span>巡检图片：</span>
              <ElButton class="bluebg-btn" :icon="Document" @click="toMediaList">在线查看</ElButton>
              <ElButton class="bluebg-btn" :icon="Download">打包下载</ElButton>
              <!-- <ElButton class="bluebg-btn" :icon="Pointer"
                >一键生成报告</ElButton
              > -->
            </div>
          </ElCol>
        </ElRow>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
<script lang="ts" setup>
import {
  ElButton,
  ElTabs,
  ElTabPane,
  ElRow,
  ElCol,
  ElTimeline,
  ElTimelineItem,
  ElSteps,
  ElStep,
} from "element-plus";
import {
  CircleCheck,
  Pointer,
  Document,
  Download,
} from "@element-plus/icons-vue";
import { getInspectionTaskDetail } from "#/api/task/inspectionTask";
import { reactive, ref, onMounted } from "vue";
import { router } from "#/router";
import mapPosition from "./map.vue";
const emit = defineEmits(["showMap"]);
const activeName = ref("first");
const activities = ref([]);
const wayPoints = ref([]); // 存储飞行轨迹数据

// 地图相关的默认值（如果需要的话）
const defaultAddress = ref("");
const defaultPoint = ref(null);

// 地图位置回调（如果地图组件需要的话）
const getPosition = (position) => {
  // 处理地图位置变化
  console.log('地图位置:', position);
};

const record = reactive({
  airportName: "",
  endTime: "",
  executeType: "",
  organizationName: "",
  planName: "",
  startTime: "",
  status: "",
  taskRule: "",
});
const handleBack = () => {
  router.go(-1);
};
const mapClick = () => {
  emit("showMap", "2");
};

const toMediaList = () => {
  router.push({
    name: "MediaData",
  });
};

const getDetail = async () => {
  const params = {
    id: router.currentRoute.value.query.id,
  };
  const { data } = await getInspectionTaskDetail(params);
  switch (data.status) {
  // 1待执行，2执行中，3已取消 4已完成 5执行失败 6 已终止
    case "1":
      record.status = "待执行";
      break;
    case "2":
      record.status = "执行中";
      break;
    case "3":
      record.status = "已取消";
      break;
    case "4":
      record.status = "已完成";
      break;
    case "5":
      record.status = "执行失败";
      break;
    case "6":
      record.status = "已终止";
      break;
  }
  // 0. 立即执行 1. 单次定时 2. 重复定时
  switch (data.executeType) {
    case "0":
      record.executeType = "立即执行";
      break;
    case "1":
      record.executeType = "单次定时";
      break;
    case "2":
      record.executeType = "重复定时";
      break;
  }
  record.airportName = data.airportName;
  record.airlineName = data.airlineName;
  record.endTime = data.endTime;
  record.organizationName = data.organizationName;
  record.planName = data.planName;
  record.startTime = data.startTime;
  record.taskRule = data.taskRule;
  activities.value = data.taskList;
  // 飞行轨迹数据
  if (data.wayPoints && data.wayPoints.length > 0) {
    wayPoints.value = data.wayPoints;
  }
};

onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss">
.el-col {
  margin-bottom: 20px;
}

.el-button {
  color: var(--el-color-primary);
}

.timelineProcessBox {
  width: 90%;

  :deep(.el-step__icon) {
    color: #5cb87a;
  }

  :deep(.el-step__title) {
    line-height: 25px;
  }

  :deep(.el-step__line) {
    background-color: #c0c4cc;
  }

  span,
  p {
    font-size: 14px;
    font-weight: normal;
    color: #909399;
  }

  p {
    color: #303133;
  }
}

.maphover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: none; /* 默认隐藏 */
  align-items: center;
  justify-content: center;
  width: 540px;
  height: 300px;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  color: #fff;
  background: rgb(0 0 0 / 30%);

  img {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
  }
}

.map-container:hover .maphover {
  display: flex; /* 悬停时显示 */
}

.img-text {
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;

  img {
    width: 330px;
    height: 210px;
  }
}
</style>
